<template>
  <div class="tab-child">
    <form
      autocomplete="off"
      @submit.prevent="onSubmit"
      >
      <div class="box box1 realName">
        <span>用户名</span>
        <input
          type="text"
          name="userName"
          v-model="user.userName"
          @blur="checkName"
        >
        <span class="isOk">{{user.name}}</span>
      </div>
      <div class="box box1 realName">
        <span>设置密码</span>
        <input
          type="password"
          name="userPassword"
          v-model="user.userPassword"
          @blur="checkPwd"
        >
        <span class="isOk">{{user.pwd}}</span>
      </div>
      <div class="box box1 realName">
        <span>手机号</span>
        <input
          type="text"
          name="userPhone"
          v-model="user.userPhone"
          @blur="checkUserPhone"
        >
        <span class="isOk">{{user.phone}}</span>
      </div>
      <!-- <div class="box box3">
        <div class="left">
          <span>验证码</span>
          <input
            type="text"
            class="cord"
            v-model="user.code"
            @blur="checkCode"
          >
        </div>
        <button type="button" @submit.prevent @click="sendSMS">发送验证码</button>
      </div> -->
      <input type="submit" value="确认注册" class="register">
    </form>
  </div>
</template>

<script>
import { register } from '@/api/register.js'
import { sendCode } from '@/api/sendCode.js'
export default {
  name: 'Register',
  data () {
    return {
      user: {
        userName: '',
        name: '',
        userPassword: '',
        pwd: '',
        userPhone: '',
        phone: '',
        code: ''
      }
    }
  },
  methods: {
    // 验证用户名
    checkName () {
      if (this.user.userName.length === 0) {
        this.user.name = '用户名不能为空'
        return false
      } else {
        this.user.name = ''
        return true
      }
    },
    // 验证密码
    checkPwd () {
      const word = this.user.userPassword.trim()
      if (word.length === 0) {
        this.user.pwd = '密码不能为空'
        return false
      } else if (!/^(\w){6,20}$/.exec(word)) {
        this.user.pwd = '输入6-20个字母、数字、下划线'
        return false
      } else {
        this.user.pwd = ''
        return true
      }
    },
    // 验证手机号
    checkUserPhone () {
      if (this.user.userPhone.length === 0) {
        this.user.phone = '手机号不能为空'
        return false
      } else if (!/^1[3456789]\d{9}$/.exec(this.user.userPhone)) {
        this.user.phone = '请输入正确的手机号'
        return false
      } else {
        this.user.phone = ''
        return true
      }
    },
    // 验证码不能为空
    checkCode () {
      if (this.user.code.length === 0) {
        return true
      } else {
        return true
      }
    },
    // 发送验证码
    sendSMS () {
      if (this.checkUserPhone()) {
        sendCode(this.user.userPhone).then(res => {
          if (res.data.code === 200) {
            alert('验证码发送成功')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        alert('请输入手机号')
      }
    },
    // 注册
    onSubmit () {
      if (this.checkName() && this.checkPwd() && this.checkUserPhone() && this.checkCode()) {
        register(this.user.userName, this.user.userPassword, this.user.userPhone, this.user.code).then(res => {
          const data = res.data
          if (data.code === 9001) {
            alert(data.msg)
          } else if (data.code === 9004) {
            alert(data.msg)
          } else if (data.code === 9008) {
            alert(data.msg)
          } else if (data.code === 9007) {
            alert(data.msg)
          } else if (data.code === 9091) {
            alert(data.msg)
          } else if (data.code === 200) {
            alert('注册成功，即将返回首页!')
            sessionStorage.setItem('userName', this.user.userName)
            sessionStorage.setItem('userPassword', this.user.userPassword)
            localStorage.setItem('userName', this.user.userName)
            localStorage.setItem('userPassword', this.user.userPassword)
            localStorage.setItem('userPhone', this.user.userPhone)
            this.$router.push('/')
            location.reload()
          } else {
            alert('网络错误，请稍后重试')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        alert('请输入完整信息')
      }
    }
  }
}
</script>

<style lang="scss" scoped src="./register.scss">

</style>
